<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous"/>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div class="container-fluid" id="app" style="margin-top: 180px;margin-bottom: 100px" v-if="pageData.total>0">
        <div class="row">
            <div class="col-sm-6 col-md-4" v-for="book in pageData.records">
                <div class="thumbnail">
                    <img :src="book.imgsrc" alt="..." class="col-sm-6 col-md-6" style="width: 140px;height: 130px">
                    <div class="caption text-left">
                        <p>ID:<span v-text="book.id"></span></p>
                        <p>图书名称:<span v-text="book.name"></span></p>
                        <p>出版社:<span v-text="book.provider"></span></p>
                        <p>作者:<span v-text="book.author"></span></p>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-12 col-md-offset-5 col-lg-offset-4col-xl-offset-5" >
                <ul class="pagination justify-content-center">
                    <li><a href="" @click.prevent = "goPage(pageData.current-1)">上一页</a></li>
                    <li><a href="" v-for="num in pageData.pages" v-text="num" @click.prevent = "goPage(num)">n</a></li>
                    <li><a href="" @click.prevent = "goPage(pageData.current+1)">下一页</a></li>
                </ul>
            </div>
        </div>
    </div>
<div>
    <ul>
        <li><a href="/bookType.html" >第二题</a></li>
        <li><a href="/three.html" >第三题</a></li>
        <li><a href="/four.html" >第四题</a></li>
        <li><a href="/five.html" >第五题</a></li>
        <li><a href="" >第六题</a></li>
        <li><a href="" >第七题</a></li>
    </ul>
</div>
</body>

<script>
    let book = new Vue({
        el:"#app",
        data: {
            pageData:{
                current:1,
                size:3,
                total:-1,
                records:[],
                pages:-1
            },
            userList:[]
        },
        methods: {
            initPageData(){
                let vueObj = this;
                let params = {
                    current: this.pageData.current,
                    pageSize: this.pageData.size,
                }
                $.post("/book/pageBook",params,function (data) {
                    console.log(data);
                    vueObj.pageData = data;
                })
            },
            goPage(pageNum){
                if (pageNum<1 || pageNum >this.pageData.pages || pageNum==this.pageData.current){
                    console.log("无效pageNum "+pageNum);
                    return
                }
                this.pageData.current = pageNum;
                this.initPageData();
            }
        },
        created() {
            this.initPageData();
        }
    })
</script>
</html>